<template>
  <!-- 文章标题 -->
  <el-form ref="form" :model="editArticle" :rules="rules" label-width="100px">
    <el-form-item label="文章标题" prop="title">
      <el-input v-model="editArticle.title"></el-input>
    </el-form-item>

    <!-- 文章内容 -->
    <el-form-item label="文章内容" prop="articleBody">
      <!-- 富文本 -->
      <quill-editor
        @blur="checkContent()"
        v-model="editArticle.articleBody"
        :options="editorOption"
      />
    </el-form-item>

    <!-- 视频地址 -->
    <el-form-item label="视频地址">
      <el-input v-model="editArticle.videoURL"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="cancelSubmit">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { update, add } from '@/api/hmmm/articles'// 导入接口
// 富文本
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'ReviseDialog',
  props: {
    article: {
      type: Object,
      reuqerid: true
    },
    isEdit: {
      type: Boolean,
      reuqerid: true
    }
  },

  components: {
    quillEditor
  },

  created () {
    // 如果是编辑状态，在弹框页面初始化的时候赋值
    if (this.isEdit) {
      this.editArticle = this.article
    }
  },

  data () {
    return {
      // 弹框表单数据
      editArticle: {
        title: '', // 文章标题
        articleBody: '', // 文章正文
        videoURL: '' // 视频地址
      },
      // 校验规则
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      // 富文本配置
      editorOption: {}
    }
  },
  methods: {
    //   确认添加/修改文章
    onSubmit () {
      // 兜底验证
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        //   修改文章
        if (this.isEdit) {
          const res = await update(this.editArticle)
          if (!res.data.success) return this.$message.error('修改文章失败')
          this.$message.success('修改文章成功')
        } else {
          //   添加文章
          const res = await add(this.editArticle)
          if (!res.data.status === 200 || !res.data.statusText === 'OK') { return this.$message.error('添加失败') }
          this.$message.success('新增文章成功')
        }
        //   关闭弹框
        this.$emit('close')
      })
    },

    //  取消修改文章
    cancelSubmit () {
      // 调用清空表单事件，给父组件发事件
      this.resetForm()
      this.$emit('close')
    },

    //  清空表单方法，父组件调用
    resetForm () {
      this.$refs.form.resetFields()
      this.editArticle = {
        title: '', // 文章标题
        articleBody: '', // 文章正文
        videoURL: '' // 视频地址
      }
    },

    //  富文本校验
    checkContent () {
      this.$refs.form.validateField('articleBody')
    }
  }
}

</script>
<style scoped lang="scss">
form.el-form {
  padding: 0 30px 0 0px;
}
.el-form-item {
  text-align: right;
}
::v-deep .ql-editor {
  min-height: 300px;
}
</style>
